<template>
  <div v-if="visible" class="overlay">
    <div class="loader">
      <img src="../assets/img/lcj.gif" alt="loading" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)

// 提供方法给外部调用
function show() {
  visible.value = true
}
function hide() {
  visible.value = false
}

defineExpose({ show, hide })
</script>

<style scoped>
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgb(226, 226, 226); /* 半透明灰背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.loader img {
  width: 80px;
  height: 80px;
}
</style>
